<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{{ data['title']}}</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="format-detection" content="telephone=no" />
        <link rel="icon" href="data:;base64,=">
        <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.9.9/skins/default/index.css" />
        <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.9.9/prism-min.js"></script>

    </script>
    <style>
        body{
            width:800px;
            margin:0 auto;
            position:relative;
        }
        .prism-player{
            widith:100%;
            margin-top:20%;
        }
        .img{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:50px;
        }
        .img img{width:100%;height: 100%;}
    </style>
</head>
<body>
<body>
    <?php
    $threeVideo = unserialize($data['extendVideo']);
    $data['videoUrl'] = $threeVideo['HD'];
    ?>
    <div  class="prism-player" id="J_prismPlayer"></div>
    <div class="img" id="img">
        <img  src="{{data['thumb']}}"  width="500" height="300"  />
    </div>

    <script>
   var url = "{{ data['videoUrl']}}";
   var player = new prismplayer({
       id: "J_prismPlayer",
       autoplay: false,
       isLive: false,
       playsinline: true,
       width: "100%",
       height: "40%",
       controlBarVisibility: "always",
       useH5Prism: false,
       useFlashPrism: true,
       source: url,
       cover: "{{data['thumb']}}"
   });
   player.on('play', function (e) {
       document.getElementById("img").style.display = "none";
   });
    </script>
</body>
</html>